// pages/user-course/user-course-detail/achievement-index/achievement-index.js
const app = getApp()
const constant = require("../../../../constant.js")
const storage = require("../../../../utils/storage.js")

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentSwiperIndex: 1,
    share: false,
    quotations: ['重塑身体，重塑生活', '健身是世界上最公平的事，付出多少，收获多少', '真正的优秀，不是卓越，是努力', '放弃可以有一万个理由，坚持只需要一个信念',
      '好身材只留给有毅力的人', '站着不动，永远都只是观众', '健身，是一辈子的事', '完美体形，是赋予自己最华丽的服饰', '撑不住的时候，可以对自己说声“我好累”，但永远不要说“我不行”！', '要么健身，要么读书，身体和灵魂都要有型！'] 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

    this.setData({
      qiniu: constant.resource.qiniu,
      host: constant.api(app.globalData.pord).url,
      unionid: wx.getStorageSync(storage.keys.unionid)
    })

    if (options.courseRoundId) {
      this.setData({
        courseRoundId: options.courseRoundId,
        share: true
      })
    } else if (decodeURIComponent(options.scene)) {
      this.setData({
        courseRoundId: decodeURIComponent(options.scene)
      })
    }

    //获取屏幕信息，用户信息，图片信息
    wx.getSystemInfo({
      success: function (res) {

        that.setData({
          canvasWidthPx: res.windowWidth * 0.67,  // canvas
          canvasHeightPx: (res.windowWidth * 0.67) * 2.19  // canvas
        })
      }
    })

    wx.getImageInfo({
      src: constant.resource.qiniu+ 'share-achievement.png',
      success(res) {
        that.setData({
          sharePath: res.path,
          coverRatio: (res.height / res.width).toFixed(2)
        })
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })

    wx.getImageInfo({
      src: constant.resource.qiniu + 'share-achievement-header.png',
      success(res) {
        that.setData({
          quantizingPath: res.path,
          quantizingCoverRatio: (res.height / res.width).toFixed(2)
        })
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })

    wx.getImageInfo({
      src: constant.resource.qiniu + 'upper-quote.png',
      success(res) {
        that.setData({
          upperQuote: res.path,
        })
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })

    wx.getImageInfo({
      src: constant.resource.qiniu + 'lower-quote.png',
      success(res) {
        that.setData({
          lowerQuote: res.path,
        })
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })

    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              that.setData({
                avatarUrl: res.userInfo.avatarUrl,
                nickName: res.userInfo.nickName
              })

              wx.downloadFile({
                url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源
                success(res) {
                  if (res.statusCode === 200) {
                    that.setData({
                      avatarUrl: res.tempFilePath
                    })
                  }
                }
              })
            }
          })

        }
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    
    wx.request({
      url: that.data.host + '/courses/' + that.data.courseRoundId + '/course-achievement?unionid=' + that.data.unionid,
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function (res) {
        if (res.data.code == "0") {
          that.setData({
            courseAchievement: res.data.data.courseAchievement,
          });
        } else {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 1000
          });
        }
      },
      fail: function (res) {
        wx.showToast({
          title: '请求数据失败',
          icon: 'none',
          duration: 1000
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },

  bindChangeSwiper: function(e) {
    this.setData({
      currentSwiperIndex: e.detail.current
    })
  },

  bindSahre: function() {
    var that = this;
    
    that.setData({
      canvasShow: true,
    })

    wx.showLoading({
      title: "正在加载中..."
    })

    //请求获取数据
    wx.request({
      url: that.data.host + '/courses/' + that.data.courseRoundId + '/course-achievement/share?unionid=' + that.data.unionid,
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function (res) {
        if (res.data.code == "0") {
          that.setData({
            punchNumber: res.data.data.courseAchievementShare.finished,
            punchStarDate: res.data.data.courseAchievementShare.effective_start,
            punchEndDate: res.data.data.courseAchievementShare.effective_end,
            qrcode: constant.resource.qiniu+'/achievement_share_qrcode.jpg'
          });

          if (res.data.data.courseAchievementShare.target) {
            that.setData({
              punchGoal: res.data.data.courseAchievementShare.target,
              digital: res.data.data.courseAchievementShare.digital
            });

            if (res.data.data.courseAchievementShare.digital) {
              that.setData({
                changeDesc: res.data.data.courseAchievementShare.change_desc,
                targetType: res.data.data.courseAchievementShare.target_type
              })

              if (res.data.data.courseAchievementShare.bfr_change_value) {
                that.setData({
                  bfrChangeValue: res.data.data.courseAchievementShare.bfr_change_value
                })
              }

              if (res.data.data.courseAchievementShare.weightChangeValue) {
                that.setData({
                  weightChangeValue: res.data.data.courseAchievementShare.weight_change_value
                })
              }
            } else {
              that.setData({
                targetDescription: res.data.data.courseAchievementShare.target_description,
                targetDescriptionDetail: res.data.data.courseAchievementShare.target_description_detail
              })
            }
          }
          //that.initCanvas();
          wx.downloadFile({
            url: that.data.qrcode, //仅为示例，并非真实的资源
            success(res) {
              if (res.statusCode === 200) {
                that.setData({
                  qrcode: res.tempFilePath
                })

                that.initCanvas();

                // if (that.data.digital) {
                //   that.initCanvas();
                // } else {
                //   that.initQuantizingCanvas();
                // }

              } else {
                wx.showToast({
                  title: '生成分享图片失败',
                  icon: 'none',
                  duration: 1000
                })
                return;
              }
            },
            fail() {
              wx.showToast({
                title: '生成分享图片失败',
                icon: 'none',
                duration: 1000
              })
              return;
            }
          })
        } else {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 1000
          });
          return;
        }
      },
      fail: function (res) {
        wx.showToast({
          title: '请求数据失败',
          icon: 'none',
          duration: 1000
        })
        return;
      }
    })

    // wx.navigateTo({
    //   url: '/pages/user-course/user-course-detail/achievement-index/share-achievement/share-achievement?courseRoundId=' + this.data.courseRoundId,
    // })
  },

  initCanvas: function () {
    const that = this;
    wx.hideLoading();
    that.setData({
      canvasSuccess: true
    })

    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('share-achievement-canvas')

    //黑色背景色
    context.save();
    context.setFillStyle("#252525");
    context.rect(0, 0, that.data.canvasWidthPx, that.data.canvasHeightPx);
    context.fill();
    context.restore();

    if (that.data.digital) {
      context.drawImage(that.data.sharePath, 0, 0, that.data.canvasWidthPx, that.data.canvasWidthPx * that.data.quantizingCoverRatio)

      //绘制文字
      const normalFont = parseInt((that.data.canvasWidthPx / 750) * 50)
      context.setFillStyle("#ffffff")
      context.setTextAlign("left")
      context.setTextBaseline('top')
      context.font = "normal " + normalFont + "px mstiffheiprc"
      context.fillText("我已在人马君打卡" + ((that.data.punchNumber || that.data.punchNumber == 0) ? that.data.punchNumber : '') + "次", that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.7)

      context.beginPath();
      context.setFillStyle('#ffde00')
      context.moveTo(that.data.canvasWidthPx * 0.26, that.data.canvasWidthPx * 0.15)
      context.lineTo(that.data.canvasWidthPx * 0.89, that.data.canvasWidthPx * 0.15);
      context.lineTo(that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 0.24);
      context.lineTo(that.data.canvasWidthPx * 0.24, that.data.canvasWidthPx * 0.24);
      context.stroke();
      context.fill();


      context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 40))
      context.setFillStyle("#333333");
      context.setTextAlign("center");
      context.setTextBaseline('middle')
      context.fillText(that.data.changeDesc ? ('累计' + that.data.changeDesc) : '', that.data.canvasWidthPx * 0.58, that.data.canvasWidthPx * 0.195, that.data.canvasWidthPx * 0.68);

      context.save();
    } else {

      context.drawImage(that.data.quantizingPath, 0, 0, that.data.canvasWidthPx, that.data.canvasWidthPx * that.data.quantizingCoverRatio)

      //绘制文字
      const normalFont = parseInt((that.data.canvasWidthPx / 750) * 50)
      console.log('ziti', parseInt((that.data.canvasWidthPx / 750) * 50))
      context.setFillStyle("#ffffff")
      context.setTextAlign("left")
      context.setTextBaseline('top')
      context.font = "normal " + normalFont + "px mstiffheiprc"
      context.fillText("我在人马君" + that.data.targetDescription, that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.68)

      context.beginPath();
      context.setFillStyle('#ffde00')
      context.moveTo(that.data.canvasWidthPx * 0.26, that.data.canvasWidthPx * 0.15)
      context.lineTo(that.data.canvasWidthPx * 0.91, that.data.canvasWidthPx * 0.15);
      context.lineTo(that.data.canvasWidthPx * 0.89, that.data.canvasWidthPx * 0.24);
      context.lineTo(that.data.canvasWidthPx * 0.24, that.data.canvasWidthPx * 0.24);
      context.stroke();
      context.fill();


      context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 40))
      context.setFillStyle("#333333");
      context.setTextAlign("center");
      context.setTextBaseline('middle')

      context.fillText("重塑身体 · 重塑生活", that.data.canvasWidthPx * 0.58, that.data.canvasWidthPx * 0.195, that.data.canvasWidthPx * 0.68);
      context.save();
    }

    

    //ctx, x, y, w, h, r, color
    this.roundRect(context, that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.52, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.2, 5, "#333333");
    context.restore();

    //绘制用户头像 
    context.save()
    context.beginPath()
    context.arc(that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 0.09, 0, 2 * Math.PI)
    context.fill()
    context.clip();
    context.setFillStyle('rgba(0,0,0, 1)')
    context.drawImage(that.data.avatarUrl, that.data.canvasWidthPx / 2 - that.data.canvasWidthPx * 0.09, that.data.canvasWidthPx * 0.5 - that.data.canvasWidthPx * 0.09, that.data.canvasWidthPx * 0.18, that.data.canvasWidthPx * 0.18);
    context.restore();

    //绘制用户昵称
    context.font = "normal Microsoft Yahei";
    context.setFillStyle('#fff')
    context.setTextAlign('center')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 34))
    context.fillText(that.data.nickName, that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.63);

    context.save();
    
    // 绘制初始数据 目标数据
    context.beginPath();
    context.setStrokeStyle("#ffffff");
    context.setLineWidth(1);
    context.moveTo(that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.68)
    context.lineTo(that.data.canvasWidthPx * 0.93, that.data.canvasWidthPx * 0.68)
    context.stroke();
    context.moveTo(that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.75)
    context.lineTo(that.data.canvasWidthPx * 0.93, that.data.canvasWidthPx * 0.75)
    context.stroke();

    context.font = "normal Microsoft Yahei";
    context.setTextAlign('center')
    context.setTextBaseline('middle')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 24))
    context.fillText('初始数据', that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.715);
    context.fillText('目前数据', that.data.canvasWidthPx * 0.75, that.data.canvasWidthPx * 0.715);

    //各个数据的进度条
    that.targetProgress(context); 

    //绘制渐变色
    const grd = context.createLinearGradient(that.data.canvasWidthPx * 0.06, that.data.canvasHeightPx * 0.8, that.data.canvasWidthPx * 0.06, that.data.canvasHeightPx * 0.97)

    grd.addColorStop(0, '#ffe400')
    grd.addColorStop(1, '#fabf00')

    this.roundRect(context, that.data.canvasWidthPx * 0.06, that.data.canvasHeightPx * 0.8, that.data.canvasWidthPx * 0.87, that.data.canvasHeightPx * 0.18, 5, grd);
    context.restore();

    //绘制二维码

    context.setTextAlign("left")
    context.setFillStyle("#000000")
    context.font = parseInt((that.data.canvasWidthPx / 750) * 26) + "px bold"
    context.fillText("长按保存图片分享", that.data.canvasWidthPx * 0.08, that.data.canvasWidthPx * 1.81, that.data.canvasWidthPx * 0.3)

    context.drawImage(that.data.qrcode, that.data.canvasWidthPx * 0.08, that.data.canvasWidthPx * 1.85, that.data.canvasWidthPx * 0.28, that.data.canvasWidthPx * 0.28)

    context.drawImage(that.data.upperQuote, that.data.canvasWidthPx * 0.4, that.data.canvasWidthPx * 1.82, that.data.canvasWidthPx * 0.03, that.data.canvasWidthPx * 0.03)

    context.drawImage(that.data.lowerQuote, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.95, that.data.canvasWidthPx * 0.03, that.data.canvasWidthPx * 0.03)

    context.setTextAlign("left");
    context.font = parseInt((that.data.canvasWidthPx / 750) * 28) + "px normal Microsoft Yahei"

    const quoteIndex = Math.round(Math.random() * 9);
    const quotationsContext = this.data.quotations[quoteIndex];
    that.generateString(context, quotationsContext, that.data.canvasWidthPx * 0.44, that.data.canvasWidthPx * 1.87, that.data.canvasWidthPx * 0.43, parseInt((that.data.canvasWidthPx / 750) * 32));

    context.beginPath();
    context.setStrokeStyle("#000000");
    context.setLineWidth(1);
    context.moveTo(that.data.canvasWidthPx * 0.4, that.data.canvasWidthPx * 2.05)
    context.lineTo(that.data.canvasWidthPx * 0.48, that.data.canvasWidthPx * 2.05)
    context.fillText("致一路坚持的小伙伴", that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 2.05, that.data.canvasWidthPx * 0.7);
    context.stroke()

    context.draw();
  },

  targetProgress: function (context, contextArray) {
    var that = this;
    // 左侧数据
    context.beginPath()
    
    const grd = context.createLinearGradient(that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.8, that.data.canvasWidthPx * 0.77, that.data.canvasWidthPx * 0.8)

    grd.addColorStop(0, '#f9d246')
    grd.addColorStop(0.2, '#7d7120')
    grd.addColorStop(0.3, '#333333')
    grd.addColorStop(0.7, '#333333')
    grd.addColorStop(0.8, '#7d7120')
    grd.addColorStop(1, '#f9d246')

    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.setLineWidth(that.data.canvasWidthPx * 0.03)

    context.save()
    context.setTextBaseline('middle')

    // 体脂肪
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 32))
    context.fillText(that.data.courseAchievement.start_bf, that.data.canvasWidthPx * 0.19, that.data.canvasWidthPx * 0.84, that.data.canvasWidthPx * 0.15);
    context.setTextAlign('left')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 24))
    context.fillText('kg', that.data.canvasWidthPx * 0.19, that.data.canvasWidthPx * 0.84, that.data.canvasWidthPx * 0.08);
    
      // 左侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')

    context.moveTo(that.data.canvasWidthPx * (0.5 - 0.0025 * that.data.courseAchievement.start_bf_percent), that.data.canvasWidthPx * 0.84)
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 0.84)

      // 右侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.77 - 0.0025 * that.data.courseAchievement.end_bf_percent), that.data.canvasWidthPx * 0.84)
    context.lineTo(that.data.canvasWidthPx * 0.77, that.data.canvasWidthPx * 0.84)
    context.stroke();

      // 右侧数据
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 28))
    context.fillText(that.data.courseAchievement.end_bf, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 0.84, that.data.canvasWidthPx * 0.1);
    context.setTextAlign('left')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 20))
    context.fillText('kg', that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 0.84, that.data.canvasWidthPx * 0.03);
    context.stroke();
    context.restore();

    // 骨骼肌
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 32))
    context.fillText(that.data.courseAchievement.start_sm, that.data.canvasWidthPx * 0.19, that.data.canvasWidthPx * 1, that.data.canvasWidthPx * 0.15);
    context.setTextAlign('left')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 24))
    context.fillText('kg', that.data.canvasWidthPx * 0.19, that.data.canvasWidthPx * 1, that.data.canvasWidthPx * 0.08);

      // 左侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.5 - 0.0025 * that.data.courseAchievement.start_sm_percent), that.data.canvasWidthPx * 1)
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1)
    context.stroke();

      // 右侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.77 - 0.0025 * that.data.courseAchievement.end_sm_percent), that.data.canvasWidthPx * 1)
    context.lineTo(that.data.canvasWidthPx * 0.77, that.data.canvasWidthPx * 1)
    context.stroke();

      // 右侧数据
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 28))
    context.fillText(that.data.courseAchievement.end_sm, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1, that.data.canvasWidthPx * 0.1);
    context.setTextAlign('left')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 20))
    context.fillText('kg', that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1, that.data.canvasWidthPx * 0.03);
    context.stroke();
    context.restore();

    // 体脂率
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 32))
    context.fillText(that.data.courseAchievement.start_bfr, that.data.canvasWidthPx * 0.19, that.data.canvasWidthPx * 1.16, that.data.canvasWidthPx * 0.15);
    context.setTextAlign('left')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 24))
    context.fillText('%', that.data.canvasWidthPx * 0.19, that.data.canvasWidthPx * 1.16, that.data.canvasWidthPx * 0.08);

      // 左侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.5 - 0.0025 * that.data.courseAchievement.start_bfr_percent), that.data.canvasWidthPx * 1.16)
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.16)
    context.stroke();

      // 右侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.77 - 0.0025 * that.data.courseAchievement.end_bfr_percent), that.data.canvasWidthPx * 1.16)
    context.lineTo(that.data.canvasWidthPx * 0.77, that.data.canvasWidthPx * 1.16)
    context.stroke();

      // 右侧数据
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 28))
    context.fillText(that.data.courseAchievement.end_bfr, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.16, that.data.canvasWidthPx * 0.1);
    context.setTextAlign('left')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 20))
    context.fillText('%', that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.16, that.data.canvasWidthPx * 0.03);
    context.stroke();
    context.restore();

    // BMI
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 32))
    context.fillText(that.data.courseAchievement.start_bmi, that.data.canvasWidthPx * 0.22, that.data.canvasWidthPx * 1.32, that.data.canvasWidthPx * 0.15);

      // 左侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.5 - 0.0025 * that.data.courseAchievement.start_bmi_percent), that.data.canvasWidthPx * 1.32)
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.32)
    context.stroke();

      // 右侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.77 - 0.0025 * that.data.courseAchievement.end_bmi_percent), that.data.canvasWidthPx * 1.32)
    context.lineTo(that.data.canvasWidthPx * 0.77, that.data.canvasWidthPx * 1.32)
    context.stroke();

      // 右侧数据
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 28))
    context.fillText(that.data.courseAchievement.end_bmi, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.32, that.data.canvasWidthPx * 0.1);
    context.stroke();
    context.restore();

    // 腰臀比
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 32))
    context.fillText(that.data.courseAchievement.start_whr, that.data.canvasWidthPx * 0.22, that.data.canvasWidthPx * 1.48, that.data.canvasWidthPx * 0.15);

      // 左侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.5 - 0.0025 * that.data.courseAchievement.start_whr_percent), that.data.canvasWidthPx * 1.48)
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.48)
    context.stroke();

      // 右侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.77 - 0.0025 * that.data.courseAchievement.end_whr_percent), that.data.canvasWidthPx * 1.48)
    context.lineTo(that.data.canvasWidthPx * 0.77, that.data.canvasWidthPx * 1.48)
    context.stroke();

      // 右侧数据
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 28))
    context.fillText(that.data.courseAchievement.end_whr, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.48, that.data.canvasWidthPx * 0.1);
    context.stroke();
    context.restore();

    // 基础代谢
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 32))
    context.fillText(that.data.courseAchievement.start_bm, that.data.canvasWidthPx * 0.22, that.data.canvasWidthPx * 1.64, that.data.canvasWidthPx * 0.15);

      // 左侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.5 - 0.0025 * that.data.courseAchievement.start_bm_percent), that.data.canvasWidthPx * 1.64)
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.64)
    context.stroke();

      // 右侧进度条
    context.setLineWidth(that.data.canvasWidthPx * 0.03)
    context.setStrokeStyle(grd)
    context.setLineCap('round')
    context.moveTo(that.data.canvasWidthPx * (0.77 - 0.0025 * that.data.courseAchievement.end_bm_percent), that.data.canvasWidthPx * 1.64)
    context.lineTo(that.data.canvasWidthPx * 0.77, that.data.canvasWidthPx * 1.64)
    context.stroke();

      // 右侧数据
    context.setTextAlign('right')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 28))
    context.fillText(that.data.courseAchievement.end_bm, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.64, that.data.canvasWidthPx * 0.1);
    context.stroke();
    context.restore();
    
    // 目标文案
    context.setTextAlign("center")
    context.fillText('体脂肪', that.data.canvasWidthPx * 0.51, that.data.canvasWidthPx * 0.84, that.data.canvasWidthPx * 0.2);
    context.fillText('骨骼肌', that.data.canvasWidthPx * 0.51, that.data.canvasWidthPx * 1, that.data.canvasWidthPx * 0.2);
    context.fillText('体脂率', that.data.canvasWidthPx * 0.51, that.data.canvasWidthPx * 1.16, that.data.canvasWidthPx * 0.2);
    context.fillText('BMI', that.data.canvasWidthPx * 0.51, that.data.canvasWidthPx * 1.32, that.data.canvasWidthPx * 0.2);
    context.fillText('腰臀比', that.data.canvasWidthPx * 0.51, that.data.canvasWidthPx * 1.48, that.data.canvasWidthPx * 0.2);
    context.fillText('基础代谢', that.data.canvasWidthPx * 0.51, that.data.canvasWidthPx * 1.64, that.data.canvasWidthPx * 0.2);
  },


  generateString: function (context, str, x, y, strWidth, fontsize) {
    var that = this;
    var chr = str.split("");//这个方法是将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    var strWidth = strWidth ? strWidth : that.data.canvasWidthPx * 0.6
    var fontsize = fontsize ? fontsize : parseInt((that.data.canvasWidthPx / 750) * 28)

    for (var a = 0; a < chr.length; a++) {
      if (context.measureText(temp).width < strWidth) {
        temp += chr[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);

    //如果数组长度大于2 则截取前两个
    if (row.length > 2) {
      var rowCut = row.slice(0, 2);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (context.measureText(test).width < strWidth) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
      rowCut.splice(1, 1, group);
      row = rowCut;
    }

    for (var b = 0; b < row.length; b++) {
      if(b >= 1 ) {
        y = y - 10
      }

      context.fillText(row[b], x, y + b * 25)
    }
  },

  initQuantizingCanvas: function () {
    var that = this;

    wx.hideLoading();
    that.setData({
      canvasSuccess: true
    })

    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('share-achievement-canvas')

    //黑色背景色
    context.save();
    context.setFillStyle("#252525");
    context.rect(0, 0, that.data.canvasWidthPx, that.data.canvasHeightPx);
    context.fill();
    context.restore();

    context.drawImage(that.data.quantizingPath, 0, 0, that.data.canvasWidthPx, that.data.canvasWidthPx * that.data.quantizingCoverRatio)

    //绘制文字
    const normalFont = parseInt((that.data.canvasWidthPx / 750) * 50)
    console.log('ziti',parseInt((that.data.canvasWidthPx / 750) * 50))
    context.setFillStyle("#ffffff")
    context.setTextAlign("left")
    context.setTextBaseline('top')
    context.font = "normal " + normalFont + "px mstiffheiprc"
    context.fillText("我在人马君" + that.data.targetDescription, that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.68)

    context.beginPath();
    context.setFillStyle('#ffde00')
    context.moveTo(that.data.canvasWidthPx * 0.26, that.data.canvasWidthPx * 0.15)
    context.lineTo(that.data.canvasWidthPx * 0.91, that.data.canvasWidthPx * 0.15);
    context.lineTo(that.data.canvasWidthPx * 0.89, that.data.canvasWidthPx * 0.24);
    context.lineTo(that.data.canvasWidthPx * 0.24, that.data.canvasWidthPx * 0.24);
    context.stroke();
    context.fill();


    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 40))
    context.setFillStyle("#333333");
    context.setTextAlign("center");
    context.setTextBaseline('middle')

    context.fillText("重塑身体 · 重塑生活", that.data.canvasWidthPx * 0.58, that.data.canvasWidthPx * 0.195, that.data.canvasWidthPx * 0.68);

    context.save();

    //ctx, x, y, w, h, r, color
    this.roundRect(context, that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.52, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 0.57, 5, "#333333");
    context.restore();

    //绘制用户头像 
    context.save()
    context.beginPath()
    context.arc(that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 0.09, 0, 2 * Math.PI)
    context.fill()
    context.clip();
    context.setFillStyle('rgba(0,0,0, 1)')
    context.drawImage(that.data.avatarUrl, that.data.canvasWidthPx / 2 - that.data.canvasWidthPx * 0.09, that.data.canvasWidthPx * 0.5 - that.data.canvasWidthPx * 0.09, that.data.canvasWidthPx * 0.18, that.data.canvasWidthPx * 0.18);
    context.restore();

    //绘制用户昵称
    context.font = "normal Microsoft Yahei";
    context.setFillStyle('#fff')
    context.setTextAlign('center')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 34))
    context.fillText(that.data.nickName, that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.63);

    //黑色内区域
    context.beginPath();
    context.setFillStyle('#252525')
    context.fillRect(that.data.canvasWidthPx * 0.11, that.data.canvasWidthPx * 0.71, that.data.canvasWidthPx * 0.78, that.data.canvasWidthPx * 0.35);

    context.beginPath()
    context.setStrokeStyle("#fcce00")
    context.setLineCap('round')
    context.setLineWidth(24)
    context.moveTo(that.data.canvasWidthPx * 0.33, that.data.canvasWidthPx * 0.72)
    context.lineTo(that.data.canvasWidthPx * 0.66, that.data.canvasWidthPx * 0.72)
    context.stroke();
    context.restore();
    

    context.beginPath();
    context.setFillStyle("#333333")
    context.setTextAlign("center")
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 30))
    context.fillText(that.data.targetDescription, that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.72)
    context.font = parseInt((that.data.canvasWidthPx / 750) * 32) + "px bold";
    context.setFillStyle("#ffffff");
    const description = (that.data.targetDescriptionDetail && that.data.targetDescriptionDetail.length > 10) ? (that.data.targetDescriptionDetail).substring(0, 10) : that.data.targetDescriptionDetail

    context.font = parseInt((that.data.canvasWidthPx / 750) * 46) + "px bold";
    context.setTextBaseline('middle')
    that.generateString(context, description, that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.86);

    context.font = parseInt((that.data.canvasWidthPx / 750) * 24) + "px normal";
    context.setFillStyle("#999999");
    context.fillText(that.data.punchStarDate ? that.data.punchStarDate : '', that.data.canvasWidthPx * 0.20, that.data.canvasWidthPx * 1.01, that.data.canvasWidthPx * 0.15);
    context.fillText(that.data.punchEndDate ? that.data.punchEndDate : '', that.data.canvasWidthPx * 0.80, that.data.canvasWidthPx * 1.01, that.data.canvasWidthPx * 0.15);
    // context.fillText(that.data.punchGoal ? that.data.punchGoal : '', that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.98)

    that.generateString(context, that.data.punchGoal ? that.data.punchGoal : '', that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.95, that.data.canvasWidthPx * 0.3, parseInt((that.data.canvasWidthPx / 750) * 28));

    context.beginPath();
    context.setStrokeStyle("#999999");
    context.setLineWidth(1);
    context.moveTo(that.data.canvasWidthPx * 0.3, that.data.canvasWidthPx * 1.02)
    context.lineTo(that.data.canvasWidthPx * 0.7, that.data.canvasWidthPx * 1.02)
    context.stroke()

    //绘制倒三角形
    context.beginPath();
    context.moveTo(that.data.canvasWidthPx * 0.45, that.data.canvasWidthPx * 1.08);
    context.lineTo(that.data.canvasWidthPx * 0.55, that.data.canvasWidthPx * 1.08);
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.13);
    context.setFillStyle("#333333");
    context.fill();

    context.save();
    //绘制渐变色
    const grd = context.createLinearGradient(20, that.data.canvasHeightPx * 0.75, 20, that.data.canvasHeightPx * 0.97)

    grd.addColorStop(0, '#ffe400')
    grd.addColorStop(1, '#fabf00')

    this.roundRect(context, 20, that.data.canvasHeightPx * 0.75, that.data.canvasWidthPx - 40, that.data.canvasHeightPx * 0.23, 5, grd);
    context.restore();

    //绘制二维码

    context.setTextAlign("left")
    context.setFillStyle("#000000")
    context.font = parseInt((that.data.canvasWidthPx / 750) * 28) + "px bold"
    context.fillText("长按保存图片分享", that.data.canvasWidthPx * 0.08, that.data.canvasWidthPx * 1.21, that.data.canvasWidthPx * 0.25)

    context.drawImage(that.data.qrcode, that.data.canvasWidthPx * 0.08, that.data.canvasWidthPx * 1.25, that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.25)

    context.drawImage(that.data.upperQuote, that.data.canvasWidthPx * 0.4, that.data.canvasWidthPx * 1.23, that.data.canvasWidthPx * 0.03, that.data.canvasWidthPx * 0.03)

    context.drawImage(that.data.lowerQuote, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.35, that.data.canvasWidthPx * 0.03, that.data.canvasWidthPx * 0.03)

    context.setTextAlign("left");
    context.font = parseInt((that.data.canvasWidthPx / 750) * 30) + "px normal Microsoft Yahei"

    const quoteIndex = Math.round(Math.random() * 9);
    const quotationsContext = this.data.quotations[quoteIndex];
    that.generateString(context, quotationsContext, that.data.canvasWidthPx * 0.44, that.data.canvasWidthPx * 1.26, that.data.canvasWidthPx * 0.43, parseInt((that.data.canvasWidthPx / 750) * 32));

    context.beginPath();
    context.setStrokeStyle("#000000");
    context.setLineWidth(1);
    context.moveTo(that.data.canvasWidthPx * 0.4, that.data.canvasWidthPx * 1.47)
    context.lineTo(that.data.canvasWidthPx * 0.48, that.data.canvasWidthPx * 1.47)
    context.fillText("致一路坚持的小伙伴", that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.47, that.data.canvasWidthPx * 0.7);
    context.stroke()

    context.draw();
  },

  initCanvas1: function () {
    const that = this;
    wx.hideLoading();
    that.setData({
      canvasSuccess: true
    })

    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('share-achievement-canvas')
    
    //黑色背景色
    context.save();
    context.setFillStyle("#252525");
    context.rect(0, 0, that.data.canvasWidthPx, that.data.canvasHeightPx);
    context.fill();
    context.restore();

    context.drawImage(that.data.sharePath, 0, 0, that.data.canvasWidthPx, that.data.canvasWidthPx * that.data.quantizingCoverRatio)

    //绘制文字
    const normalFont = parseInt((that.data.canvasWidthPx / 750) * 50)
    context.setFillStyle("#ffffff")
    context.setTextAlign("left")
    context.setTextBaseline('top')
    context.font = "normal " + normalFont + "px mstiffheiprc"
    context.fillText("我已在人马君打卡" + ((that.data.punchNumber || that.data.punchNumber == 0) ? that.data.punchNumber : '') + "次", that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.7)

    context.beginPath();
    context.setFillStyle('#ffde00')
    context.moveTo(that.data.canvasWidthPx * 0.26, that.data.canvasWidthPx* 0.15)
    context.lineTo(that.data.canvasWidthPx * 0.89, that.data.canvasWidthPx * 0.15);
    context.lineTo(that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 0.24);
    context.lineTo(that.data.canvasWidthPx * 0.24, that.data.canvasWidthPx * 0.24);
    context.stroke();
    context.fill();


    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 40))
    context.setFillStyle("#333333");
    context.setTextAlign("center");
    context.setTextBaseline('middle')
    context.fillText(that.data.changeDesc ? ('累计' + that.data.changeDesc) : '', that.data.canvasWidthPx * 0.58, that.data.canvasWidthPx * 0.195, that.data.canvasWidthPx * 0.68);

    context.save();
    
    //ctx, x, y, w, h, r, color
    this.roundRect(context, that.data.canvasWidthPx * 0.06, that.data.canvasWidthPx * 0.52, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 0.57, 5, "#333333");
    context.restore();

    //绘制用户头像 
    context.save()
    context.beginPath()
    context.arc(that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 0.09, 0, 2 * Math.PI)
    context.fill()
    context.clip();
    context.setFillStyle('rgba(0,0,0, 1)')
    context.drawImage(that.data.avatarUrl, that.data.canvasWidthPx / 2 - that.data.canvasWidthPx * 0.09, that.data.canvasWidthPx * 0.5 - that.data.canvasWidthPx * 0.09, that.data.canvasWidthPx * 0.18, that.data.canvasWidthPx * 0.18);
    context.restore();

    //绘制用户昵称
    context.font = "normal Microsoft Yahei";
    context.setFillStyle('#fff')
    context.setTextAlign('center')
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 34))
    context.fillText(that.data.nickName, that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.63);
  
    //黑色内区域
    context.beginPath();
    context.setFillStyle('#252525')
    context.fillRect(that.data.canvasWidthPx * 0.11, that.data.canvasWidthPx * 0.71, that.data.canvasWidthPx * 0.78, that.data.canvasWidthPx * 0.35);

    context.beginPath()
    context.setStrokeStyle("#fcce00")
    context.setLineCap('round')
    context.setLineWidth(24)
    context.moveTo(that.data.canvasWidthPx * 0.33, that.data.canvasWidthPx * 0.72)
    context.lineTo(that.data.canvasWidthPx * 0.66, that.data.canvasWidthPx * 0.72)
    context.stroke();
    context.restore();

    context.beginPath();
    context.setFillStyle("#333333")
    context.setTextAlign("center")
    context.setFontSize(parseInt((that.data.canvasWidthPx / 750) * 30))
    context.fillText("累计", that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.72)
    context.font = parseInt((that.data.canvasWidthPx / 750) * 46) + "px bold";
    context.setFillStyle("#ffffff");

    context.fillText(that.data.changeDesc ? that.data.changeDesc : '', that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.86)
   
    context.font = parseInt((that.data.canvasWidthPx / 750) * 24)+"px normal";
    context.setFillStyle("#999999");
    context.fillText(that.data.punchStarDate ? that.data.punchStarDate : '', that.data.canvasWidthPx * 0.20, that.data.canvasWidthPx * 1.01, that.data.canvasWidthPx * 0.15);
    context.fillText(that.data.punchEndDate ? that.data.punchEndDate : '', that.data.canvasWidthPx * 0.80, that.data.canvasWidthPx * 1.01, that.data.canvasWidthPx * 0.15);

    // context.fillText(that.data.punchGoal ? that.data.punchGoal : '', that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.98)
    that.generateString(context, that.data.punchGoal ? that.data.punchGoal : '', that.data.canvasWidthPx / 2, that.data.canvasWidthPx * 0.95, that.data.canvasWidthPx * 0.3, parseInt((that.data.canvasWidthPx / 750) * 28));

    context.beginPath();
    context.setStrokeStyle("#999999");
    context.setLineWidth(1);
    context.moveTo(that.data.canvasWidthPx * 0.3, that.data.canvasWidthPx * 1.02)
    context.lineTo(that.data.canvasWidthPx * 0.7, that.data.canvasWidthPx * 1.02)
    context.stroke()

    //绘制倒三角形
    context.beginPath();
    context.moveTo(that.data.canvasWidthPx * 0.45, that.data.canvasWidthPx * 1.08);
    context.lineTo(that.data.canvasWidthPx * 0.55, that.data.canvasWidthPx * 1.08);
    context.lineTo(that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.13);
    context.setFillStyle("#333333");
    context.fill();

    context.save();
    //绘制渐变色
    const grd = context.createLinearGradient(20, that.data.canvasHeightPx * 0.75, 20, that.data.canvasHeightPx * 0.97)

    grd.addColorStop(0, '#ffe400')
    grd.addColorStop(1, '#fabf00')

    this.roundRect(context, 20, that.data.canvasHeightPx * 0.75, that.data.canvasWidthPx - 40, that.data.canvasHeightPx * 0.23, 5, grd);
    context.restore();

    //绘制二维码

    context.setTextAlign("left")
    context.setFillStyle("#000000")
    context.font = parseInt((that.data.canvasWidthPx / 750) * 28) + "px bold"
    context.fillText("长按保存图片分享", that.data.canvasWidthPx * 0.08, that.data.canvasWidthPx * 1.21, that.data.canvasWidthPx * 0.25)

    context.drawImage(that.data.qrcode, that.data.canvasWidthPx * 0.08, that.data.canvasWidthPx * 1.25, that.data.canvasWidthPx * 0.25, that.data.canvasWidthPx * 0.25)

    context.drawImage(that.data.upperQuote, that.data.canvasWidthPx * 0.4, that.data.canvasWidthPx * 1.23, that.data.canvasWidthPx * 0.03, that.data.canvasWidthPx * 0.03)

    context.drawImage(that.data.lowerQuote, that.data.canvasWidthPx * 0.87, that.data.canvasWidthPx * 1.35, that.data.canvasWidthPx * 0.03, that.data.canvasWidthPx * 0.03)

    context.setTextAlign("left");
    context.font = parseInt((that.data.canvasWidthPx / 750) * 30) + "px normal Microsoft Yahei"

    const quoteIndex = Math.round(Math.random() * 9);
    const quotationsContext = this.data.quotations[quoteIndex];
    that.generateString(context, quotationsContext, that.data.canvasWidthPx * 0.44, that.data.canvasWidthPx * 1.26, that.data.canvasWidthPx * 0.43, parseInt((that.data.canvasWidthPx / 750) * 32));

    context.beginPath();
    context.setStrokeStyle("#000000");
    context.setLineWidth(1);
    context.moveTo(that.data.canvasWidthPx * 0.4, that.data.canvasWidthPx * 1.47)
    context.lineTo(that.data.canvasWidthPx * 0.48, that.data.canvasWidthPx * 1.47)
    context.fillText("致一路坚持的小伙伴", that.data.canvasWidthPx * 0.5, that.data.canvasWidthPx * 1.47, that.data.canvasWidthPx * 0.7);
    context.stroke()

    context.draw();
  },

  roundRect: function (ctx, x, y, w, h, r, color) {
    ctx.beginPath()

    ctx.setFillStyle(color)
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
    ctx.moveTo(x + r, y)
    ctx.lineTo(x + w - r, y)
    ctx.lineTo(x + w, y + r)
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
    ctx.lineTo(x + w, y + h - r)
    ctx.lineTo(x + w - r, y + h)
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
    ctx.lineTo(x + r, y + h)
    ctx.lineTo(x, y + h - r)
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
    ctx.lineTo(x, y + r)
    ctx.lineTo(x + r, y)
    ctx.fill()
    ctx.closePath()
    ctx.clip()
  },

  saveImageToPhotosAlbum: function () {
    const that = this;

    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.canvasWidthPx,
      height: that.data.canvasHeightPx,
      destWidth: that.data.canvasWidthPx * 2,
      destHeight: that.data.canvasHeightPx * 2,
      canvasId: 'share-achievement-canvas',
      success: function (res) {
        
        that.setData({
          shareImagesPath: res.tempFilePath,
        })

        wx.showToast({
          title: '生成图片成功',
          icon: 'success',
          duration: 1500
        })
      },
      fail: function (res) {
        wx.showToast({
          title: '生成图片失败',
          icon: 'success',
          duration: 1500
        })
      }
    })

    wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success() {
        wx.saveImageToPhotosAlbum({
          filePath: that.data.shareImagesPath,
          success(res) {
            wx.showToast({
              title: '保存图片成功',
              icon: 'success',
              duration: 1500
            })
          }
        })
      }
    })
  },
})